import { detPeoList } from "@/api/modules/people";
import LayoutWhite from "@/components/LayoutWhite";
import Title from "@/components/Title";
import Titles from "@/components/Titles";
import { Input, Tabs, Image, Button } from "antd";
import moment from "moment";
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";

const { TabPane } = Tabs;

const guanXi = [
	{
		value: "0",
		label: "父子"
	},
	{
		value: "1",
		label: "母子"
	}
];

const Detail = () => {
	const navigate = useNavigate();
	const [searchParams] = useSearchParams();
	const [data, setData] = useState<any>({});

	const getDetail = async () => {
		const {
			data: { data }
		} = await detPeoList({ id: searchParams.get("id") });
		setData(data);
	};

	useEffect(() => {
		getDetail();
	}, []);

	return (
		<LayoutWhite>
			<div style={{ width: "100%", height: "100%", display: "flex", background: "rgb(249,250,251)" }}>
				<div style={{ height: "100%", flex: 3, background: "white", display: "flex", flexDirection: "column" }}>
					<Title word="人员详情"></Title>
					<div style={{ width: "100%", flex: 1, overflowY: "scroll" }}>
						<div style={{ width: "100%", height: "60px", display: "flex" }}>
							<img
								src={"https://tse4-mm.cn.bing.net/th/id/OIP-C.1eW3_u1T8He1QmfKH_ctngAAAA?rs=1&pid=ImgDetMain"}
								style={{ width: "calc(height)", height: "100%" }}
							/>
							<div
								style={{
									height: "100%",
									flex: 1,
									display: "flex",
									flexDirection: "column",
									justifyContent: "space-around",
									alignItems: "start",
									paddingLeft: "20px"
								}}
							>
								<span style={{ fontSize: "12px" }}>
									<b style={{ fontSize: "15px" }}>{data?.name} </b>
									{data?.age}岁 {data?.gender ? "男" : "女"}
								</span>
								<b style={{ fontSize: "15px" }}>{data?.telephone}</b>
							</div>
						</div>
						<Input.TextArea disabled placeholder="备注信息..." style={{ height: "70px", marginTop: "20px" }}></Input.TextArea>
						<div style={{ marginTop: "20px", width: "100%", height: "140px", border: "1px solid cyan", position: "relative" }}>
							<span
								style={{
									width: "100%",
									height: "30px",
									position: "absolute",
									left: 0,
									bottom: "30px",
									padding: "10px",
									display: "flex",
									flexDirection: "column",
									justifyContent: "space-around",
									alignItems: "start"
								}}
							>
								<span>{data?.address}</span>
								<span>{data?.description}</span>
							</span>
						</div>
						<div style={{ marginTop: "20px", padding: "10px" }}>
							<Titles title="档案信息" left={true} size={14} />
							<div
								style={{
									height: "50px",
									width: "100%",
									display: "flex",
									alignItems: "center",
									background: "rgb(247,247,247)",
									marginBottom: "10px"
								}}
							>
								<span style={{ flex: 3, color: "rgb(170,170,170)", textAlign: "center" }}>人员生日</span>
								<b style={{ flex: 7, textAlign: "left" }}>{moment(data?.birthday).format("YYYY-MM-DD")}</b>
							</div>
							<div
								style={{ height: "50px", width: "100%", display: "flex", alignItems: "center", background: "rgb(247,247,247)" }}
							>
								<span style={{ flex: 3, color: "rgb(170,170,170)", textAlign: "center" }}>医保类型</span>
								<b style={{ flex: 7, textAlign: "left" }}>职工医保</b>
							</div>
						</div>
						<div style={{ marginTop: "20px", padding: "10px" }}>
							<Titles title="关联用户" left={true} size={14} />
							{data?.userInfoList?.map((item: any, ind: number) => {
								return (
									<div
										key={ind}
										style={{
											height: "50px",
											width: "100%",
											display: "flex",
											alignItems: "center",
											background: "rgb(247,247,247)",
											marginBottom: "10px"
										}}
									>
										<span style={{ flex: 3, color: "rgb(170,170,170)", textAlign: "center" }}>关联用户{ind + 1}</span>
										<b style={{ flex: 7, textAlign: "left" }}>
											{guanXi.find(v => v.value == item.relation)?.label} | {item.name} ({item.telephone})
										</b>
									</div>
								);
							})}
						</div>
					</div>
				</div>
				<div
					style={{ height: "100%", flex: 7, background: "white", marginLeft: "10px", padding: "0px 20px", position: "relative" }}
				>
					<Button
						type="primary"
						onClick={() => navigate("/staff/adds")}
						style={{ zIndex: 1, position: "absolute", right: "35px", top: "0px" }}
					>
						新增
					</Button>
					<Tabs style={{ height: "100%", overflowY: "auto" }}>
						{[1, 2, 3].map((item: any, ind: number) => {
							return (
								<TabPane tab={`陪诊记录${ind + 1}`} key={ind + 1}>
									<div
										style={{
											width: "100%",
											height: "130px",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="基本信息" left={true} size={14} />
										<div
											style={{
												width: "100%",
												flex: 1,
												display: "flex",
												justifyContent: "space-between",
												alignItems: "center"
											}}
										>
											{["就诊时间", "就诊医院", "就诊科室", "就诊医生", "陪诊员工"].map((item: any, ind: number) => {
												return (
													<b
														key={ind}
														style={{
															width: "19%",
															height: "100%",
															display: "flex",
															justifyContent: "space-around",
															alignItems: "center",
															background: "rgb(240,240,240)"
														}}
													>
														{item}
													</b>
												);
											})}
										</div>
									</div>
									<div
										style={{
											width: "100%",
											height: "230px",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="诊断过程" left={true} size={14} />
										<img
											src="https://ts1.tc.mm.bing.net/th/id/R-C.f27866414d79748625d6f8fa89e59349?rik=GoacpEi26x6uVA&riu=http%3a%2f%2fpic.616pic.com%2fbg_w1180%2f00%2f04%2f22%2fMh4NIkVgu9.jpg!%2ffw%2f1120&ehk=6EYXyw67kR%2fQHSdahelH%2fBhvoKxbKjRtv9iPDXHIEeU%3d&risl=&pid=ImgRaw&r=0"
											style={{ width: "300px", height: "200px", borderRadius: "6px" }}
										/>
									</div>
									<div
										style={{
											width: "100%",
											height: "fit-content",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="注意事项" left={true} size={14} />
										<div style={{ flex: 1, background: "rgb(240,240,240)", padding: "10px", borderRadius: "6px" }}>
											胃肠炎是一种由各种因素引发的胃肠黏膜炎症，主要表现为腹痛、腹泻、恶心和呕吐等。该病分为急性和慢性两种，其中急性胃肠炎更常见，多由病毒、细菌或寄生虫感染造成。病源还可以是药物、酗酒、过敏、自身免疫病等非感染性因素。小儿或免疫力低下的人群较为易感胃肠炎。
										</div>
									</div>
									<div
										style={{
											width: "100%",
											height: "fit-content",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="用药医嘱" left={true} size={14} />
										{[1, 2, 3].map((item: any, ind: number) => {
											return (
												<div
													key={ind}
													style={{
														background: "rgb(240,240,240)",
														padding: "10px",
														borderRadius: "6px",
														display: "flex",
														justifyContent: "space-between",
														alignItems: "center",
														marginBottom: "10px"
													}}
												>
													<b>感冒灵胶囊</b>
													<span style={{ color: "rgb(91,91,91)" }}>饭后口服 | 每日三次 每次三粒</span>
												</div>
											);
										})}
										<div style={{ width: "100%", display: "flex", flexWrap: "wrap" }}>
											{[1, 2, 3].map((_: any, ind: number) => {
												return (
													<Image
														key={ind}
														src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
														style={{ marginRight: "10px", width: "100px", height: "100px" }}
													/>
												);
											})}
										</div>
									</div>
									<div
										style={{
											width: "100%",
											height: "fit-content",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="检查报告" left={true} size={14} />
										<div style={{ width: "100%", display: "flex", flexWrap: "wrap" }}>
											{[1, 2, 3].map((_: any, ind: number) => {
												return (
													<Image
														key={ind}
														src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
														style={{ marginRight: "10px", width: "100px", height: "100px" }}
													/>
												);
											})}
										</div>
									</div>
									<div
										style={{
											width: "100%",
											height: "fit-content",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="复查建议" left={true} size={14} />
										<div
											style={{
												flex: 1,
												background: "rgb(240,240,240)",
												padding: "10px",
												borderRadius: "6px",
												display: "flex",
												justifyContent: "space-between",
												alignItems: "center"
											}}
										>
											<b>复查建议说明</b>
											<span style={{ color: "rbg(170,170,170)" }}>2025-03-04</span>
										</div>
									</div>
									<div
										style={{
											width: "100%",
											height: "fit-content",
											padding: "10px",
											display: "flex",
											flexDirection: "column"
										}}
									>
										<Titles title="本次花费" left={true} size={14} />
										<div
											style={{
												width: "100%",
												height: "fit-content",
												background: "rgb(240,240,240)",
												borderRadius: "6px",
												padding: "10px"
											}}
										>
											<div
												style={{
													width: "100%",
													height: "20px",
													display: "flex",
													justifyContent: "space-between",
													alignItems: "center"
												}}
											>
												<b>合计费用</b>
												<b>￥855.50</b>
											</div>
											<hr style={{ border: "none", borderTop: "1px dashed #000" }} />
											{[1, 2, 3].map((item: any, ind: any) => {
												return (
													<div
														key={ind}
														style={{
															width: "100%",
															height: "30px",
															display: "flex",
															justifyContent: "space-between",
															alignItems: "center"
														}}
													>
														<span>门诊挂号</span>
														<span>￥666.66</span>
													</div>
												);
											})}
										</div>
										<div style={{ width: "100%", display: "flex", flexWrap: "wrap", marginTop: "10px" }}>
											{[1, 2, 3].map((_: any, ind: number) => {
												return (
													<Image
														key={ind}
														src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
														style={{ marginRight: "10px", width: "100px", height: "100px" }}
													/>
												);
											})}
										</div>
									</div>
								</TabPane>
							);
						})}
					</Tabs>
				</div>
			</div>
		</LayoutWhite>
	);
};

export default Detail;
